<template>
  <a-card>
    <a-form layout="inline" :form="form" @submit="handleSubmit">
      <a-row>
        <a-col :span="itemSpan">
          <a-form-item label="问题标题">
            <a-input placeholder="请输入问题标题" v-decorator="['title']"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="itemSpan">
          <a-form-item label="所属小程序">
            <a-select style="width:170px" @change="brandsChange" v-decorator="['brandId',{initialValue:initBrands}]" placeholder="全部">
              <a-select-option :value="item.weid" v-for="item in brands" :key="item.weid">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="itemSpan">
          <a-form-item label="问题分类">
            <a-select style="width:170px" v-decorator="['categoryId']" placeholder="全部">
              <a-select-option :value="item.id" v-for="item in categoyList" :key="item.id">
                {{ item.categoryName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="itemSpan">
          <a-form-item label="是否热门问题">
            <a-select style="width:170px" v-decorator="['isHot']" placeholder="全部">
              <a-select-option :value="1">
                是
              </a-select-option>
              <a-select-option :value="0">
                否
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="itemSpan * 2">
          <a-form-item label="问题跳转方式">
            <a-select style="width:170px" v-decorator="['jumpWay']" placeholder="全部">
              <a-select-option value="ANSWER" >
                问题详情页
              </a-select-option>
              <a-select-option value="KEFU">
                人工客服
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="itemSpan" :offset="itemOffset">
          <a-form-item>
            <a-button type="primary" html-type="submit">搜索</a-button>
            <a-button type="primary" @click="resetForm" class="ml-10">重置</a-button>
            <a-button type="primary" class="ml-10" @click="add(null)">新增</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      style="margin-top:20px"
      bordered
      :columns="columns"
      :rowKey="record => record.id"
      :data-source="dataSource"
      :pagination="pagination"
      :scroll="{ x: true }"
      @change="handleTableChange"
    >
      <span slot="brand" slot-scope="text, record">{{ searchBrand(record.brandId).name }}</span>
      <span slot="hot" slot-scope="text, record">
      <a-switch :checked="record.hotState == 1" @click="updateHot(record)"></a-switch>
      </span>
      <span slot="action" slot-scope="text, record">
         <a-icon type="arrow-up" class="sort" @click="move(record,'up',1)"/>
        <a-icon type="arrow-down" class="sort ml-10" @click="move(record,'down',1)"/>
        <a @click="add(record)" class="ml-10">编辑</a>
        <a @click="deleteService(record,1,'确认删除该问题吗？','删除后，使用该问题的小程序将不再展示该问题')" class="ml-10">删除</a>
      </span>
    </a-table>
    <create @close="close" v-if="visible" :info="info"/>
  </a-card>
</template>
<script>
import { brands } from '../../util/brand'
import create from './form'
import { listMixin } from '../../util/listMixin'
import { isHot,getCategories } from '@/api/micromall'
const columns = [
  {
    title: '问题标题',
    dataIndex: 'question',
     width: 200,
    // slots: { title: 'customTitle' },
    // scopedSlots: { customRender: 'name' },
  },
  {
    title: '问题分类',
    dataIndex: 'categoryName',
     width: 200,
    // slots: { title: 'customTitle' },
    // scopedSlots: { customRender: 'name' },
  },
  {
    title: '所属小程序',
    width: 200,
    scopedSlots: { customRender: 'brand' }
  },
  {
    title: '热门问题',
    width: 100,
    scopedSlots: { customRender: 'hot' }
  },
  {
    title: '认为有效',
    dataIndex: 'usefulNum',
    width: 120,
    sorter: (a, b) => a.usefulNum - b.usefulNum,
  },
  {
    title: '认为无效',
    dataIndex: 'uselessNum',
    width: 120,
    sorter: (a, b) => a.uselessNum - b.uselessNum,
  },
 
  {
    title: '创建时间',
    key: 'createTime',
     width: 200,
    dataIndex: 'createTime'
  },
  {
    title: '更新时间',
    key: 'updateTime',
     width: 200,
    dataIndex: 'updateTime'
  },
  {
    title: '操作',
    fixed:'right',
     width: 200,
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'problem',
  mixins: [listMixin],
  components: { create },
  data() {
    return {
      visible: false,
      brands,
      itemSpan: 6,
      itemOffset: 6,
      showTitle: '新增',
      info:null,
      columns,
      categoyList:[],
      initBrands:2738574294,
      url: {
        list: '/jic-backend-aftersale/aftersale/kefu/question/list',
        // delete: '/jic-backend-wechat/wechat-client/template/link'
      }
    }
  },
  mounted(){
    this.getcategoryList(this.initBrands)
  },
  methods: {
    brandsChange(e){
      this.getcategoryList(e)
    },
    async getcategoryList(brandId) {
      const re = await getCategories({ brandId })
      if (re.code == 200) {
        this.categoyList = re.data
      } else {
        this.$message.error(re.msg)
      }
    },
    async updateHot(record){
      const re = await isHot({id:record.id,state:record.hotState == 1?0:1})
      if(re.code == 200){
        this.$message.success('修改成功')
        this.loadData()
      }else{
        this.$message.error(re.msg)
      }
    },
    submit(e) {},
    add(record) {
      this.visible = true
      this.info = record
      if(record == null){
        this.showTitle = '新增'
      }else{
        this.showTitle = '编辑'
      }
    },
    close() {
      this.info = null
      this.visible = false
      this.loadData()
    }
  }
}
</script>
<style scoped>
.ml-10 {
  margin-left: 10px;
}

.sort{
  color: #1890FF;
}
</style>
